<template>
  <div class="carouselwrapper">
      <a-carousel :after-change="onChange" :autoplay='true'>
        <div class="imgbanber" :style="{'background':banerInfo.img?'url('+banerInfo.img+') no-repeat':'url(./static/image/baner1.webp) no-repeat;','background-size':'100% 100%;'}" >
          <h3 ></h3>
        </div>
        <div class="imgbanber banber1"><h3></h3></div>
        <div class="imgbanber banber2"><h3>3</h3></div>
      </a-carousel>
  </div>
</template>

<script>

import {
    getBannerApi
} from "~/assets/js/api";
export default {
  components: {},
  props: {
  banercode: {
    type: String,
    default: function () {
      return 'index'
    }
  }
},
  data() {
    return {
      banerInfo:'',
    };
  },
  watch: {},
  computed: {},
  methods: {
    onChange(a, b, c) {
      console.log(a, b, c);
    },
    getBannerInfo(){
      getBannerApi({code:'index'}).then((res)=>{
        if(res.data){
          this.banerInfo=res.data;
          console.log(this.banerInfo,'banerInfo')
        }
      })
    }
  },
  created() {},
  mounted() {
    this.getBannerInfo()
  }
};
</script>
<style lang="less" scoped>
.carouselwrapper{
  /* For demo */
  width: 100%;
  .ant-carousel /deep/ .slick-slide {
    text-align: center;
    height: 280px;
    line-height: 160px;
    background: #b8b8b8;
    overflow: hidden;
  }
  .banber1{
    background: url("@/static/image/baner1.webp") no-repeat center center;
    background-size: cover !important;
  }
  .banber2{
    background: url("@/static/image/baner2.webp") no-repeat center center;
    background-size: cover !important;
  }
  .imgbanber{
    width: 100%;
    height: 280px;
    background-position: center !important;
    background-size: 100% 100% !important;
  }
  .ant-carousel /deep/ .slick-slide h3 {
    color: #fff;
  }
   /deep/ .ant-carousel .slick-dots li button{
    height: 4px;
    width: 30px;
  }
  /deep/ .ant-carousel  .slick-active button{
    width: 38px !important;
  }
}
</style>
